<template>
  <el-dialog
    v-model="dialogShow"
    title="批量添加VIP"
    width="30%"
    center
    :close-on-click-modal="false"
    draggable
  >
    <el-form :model="form">
      <el-form-item label="考试批次" :label-width="formLabelWidth">
        <el-select v-model="form.batchCode" placeholder="选择考试批次">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品类型" :label-width="formLabelWidth">
        <el-select v-model="form.type" placeholder="选择商品类型">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="考号" :label-width="formLabelWidth">
        <el-input v-model="form.examNo" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleConfirm"> 确 定 </el-button>
        <el-button @click="handleClose"> 取 消 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { addVip } from "@/Api/pc";
import { showMessage } from "@/utils";
const formLabelWidth = 150;
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["update:show", "update"]);
const dialogShow = computed({
  get: () => props.show,
  set: (val) => {
    emits("update:show", val);
  },
});

const form = reactive({
  batchCode: "",
  type: "",
  examNo: "",
});

const handleClose = () => {
  emits("update:show", false);
};
const handleConfirm = async () => {
  const response = await addVip({ ...form, examNos: form.examNo });
  const { code, msg } = response;
  if (code === 0) {
    showMessage("success", `${msg}`);
    emits("update:show", false);
    emits("update");
  }
};
</script>
<style lang="scss" scoped></style>
